<!--
	作者：2575202388@qq.com
	时间：2018-10-14
	描述：首页我的信息
-->

<template>
    <Card :bordered="false" style="height:430px;">
        <p slot="title">
        	<Icon type="md-pie" style="color:#5d5386;font-size: 18px;"/>	 
        	<span style="padding-left:2px;font-weight: normal;">登记统计一</span>
        </p>
        <div style="width:100%;float:left;text-align: center;margin:0 auto;display:table;" align="center">	
      		<div ref="static1" style="width:100%;min-width: 600px; float:left;height:330px;"></div>
        </div>
    </Card>
</template>

<script>
	import Highcharts from 'highcharts'
	require('highcharts/modules/exporting')(Highcharts);
	export default {
		name:"static1",
		props: {
    		sexlist:{
    			type: Array
    		}
    	},
		mounted(){
			
		},
		methods: {
		     drawLine(){
		     	var sexlist=this.sexlist;
		     	var carr=[];
		     	var totaln=0;var totall=0;
		     	var carrb=[];var carrg=[];
		     	for(var i=0;i<sexlist.length;i++){
		     		carr.push(sexlist[i].CSNAME);
		     		if(sexlist[i].SEXN){
		     			totaln=parseInt(totaln)+parseInt(sexlist[i].SEXN);
		     			carrb.push(sexlist[i].SEXN);
		     		}else{
		     			carrb.push(0);
		     		}
		     		if(sexlist[i].SEXL){
		     			totall=parseInt(totall)+parseInt(sexlist[i].SEXL);
		     			carrg.push(sexlist[i].SEXL);
		     		}else{
		     			carrg.push(sexlist[i].SEXL);
		     		}
		     	}
		    
		    	var chart = Highcharts.chart(this.$refs.static1, {
					title: {
						text: '男女登记统计表'
					},
					xAxis: {
						categories: carr
					},
					lang:{ 
						downloadJPEG: "下载JPEG 图片",  
						downloadPDF: "下载PDF文档"  ,
						downloadPNG: "下载PNG 图片",
						downloadSVG: "下载SVG 矢量图" , 
						exportButtonTitle: "导出图片"  ,
				    },  
					plotOptions: {
						series: {
							stacking: 'normal'
						}
					},
					legend: {
						layout: 'vertical',
						align: 'right',
						verticalAlign: 'middle'
					},
					yAxis: {
				        min: 0,
				        title: {
				            text: '人数'
				        }
				    },
					labels: {
						items: [{
							html: '男女比例',
							style: {
								left: '100px',
								top: '5px',
								color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
							}
						}]
					},
					series: [{
						type: 'column',
						name: '男',
						data: carrb
					}, {
						type: 'column',
						name: '女',
						data: carrg
					}, {
						type: 'pie',
						name: '男女总数比例',
						data: [{
							name: '男',
							y: totaln,
							color: Highcharts.getOptions().colors[0] // Jane's color
						}, {
							name: '女',
							y: totall,
							color: Highcharts.getOptions().colors[1] // John's color
						}],
						center: [50, 20],
						size: 100,
						showInLegend: false,
						dataLabels: {
							enabled: false
						}
					}]
				});

		    }
		},
		watch:{
			sexlist(news,olds){
				if(news){
					this.drawLine();
				}
			}
		},
	}
</script>

<style>

</style>



